import { createRouter, createWebHistory } from 'vue-router'
import { useCookies } from '@vueuse/integrations/useCookies';
import { ElMessage } from 'element-plus';

const cookie = useCookies()
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/test',
      name: 'test',
      component: () => import('../views/Test.vue'),
      meta: {
        requiresAuth: false, // 不需要权限校验
      },
    },
    {
      path: '/',
      name: 'overview',
      component: () => import('../views/home/Overview.vue'),
      meta: {
        requiresAuth: false, // 不需要权限校验
      },
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/home/Login.vue'),
      meta: {
        requiresAuth: false, // 不需要权限校验
      },
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('../views/home/Register.vue'),
      meta: {
        requiresAuth: false, // 不需要权限校验
      },
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/About.vue'),
      meta: {
        requiresAuth: false, // 不需要权限校验
      },
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('../views/home/Home.vue'),
      meta: {
        requiresAuth: true, // 需要权限校验
      },
      children: [
        {
          path: 'recommend',
          name: 'recommend',
          component: () => import('../views/body/Recommend.vue')
        },
        {
          path: 'articleList',
          name: 'articleList',
          component: () => import('../views/body/ArticleList.vue')
        },
        {
          path: 'article/:id',
          name: 'article',
          component: () => import('../views/body/Article.vue')
        },
        {
          path: 'question/:id',
          name: 'question',
          component: () => import('../views/body/Question.vue'),
          redirect: to => `/home/question/${to.params.id}/answerList`,
          children: [
            {
              path: 'answerList',
              name: 'answerList',
              component: () => import('../views/body/AnswerList.vue')
            }
          ]
        },
        {
          path: 'questionList',
          name: 'questionList',
          component: () => import('../views/body/QuestionList.vue')
        },
        {
          path: 'followList/:id/:tab',
          name: 'followList',
          component: () => import('../views/body/FollowList.vue')
        },
        {
          path: 'contentManagement',
          name: 'contentManagement',
          component: () => import('../views/body/contentManagement/ContentManagement.vue'),
          redirect: to => `/home/contentManagement/articleManagement`,
          children: [
            {
              path: 'articleManagement',
              name: 'articleManagement',
              component: () => import('../views/body/contentManagement/ArticleManagement.vue')
            },
            {
              path: 'questionManagement',
              name: 'questionManagement',
              component: () => import('../views/body/contentManagement/QuestionManagement.vue')

              
            },
            {
              path: 'answerManagement',
              name: 'answerManagement',
              component: () => import('../views/body/contentManagement/AnswerManagement.vue')
            }
          ]
        },
        {
          path: 'userCenter/:id',
          name: 'userCenter',
          component: () => import('../views/body/userCenter/UserCenter.vue'),
          redirect: to => `/home/userCenter/${to.params.id}/like`,
          children: [
            {
              path: 'like',
              name: 'userLike',
              component: () => import('../views/body/userCenter/Like.vue')
            },
            {
              path: 'article',
              name: 'userArticle',
              component: () => import('../views/body/userCenter/Article.vue')
            },
            {
              path: 'question',
              name: 'userQuestion',
              component: () => import('../views/body/userCenter/Question.vue')
            },
            {
              path: 'answer',
              name: 'userAnswer',
              component: () => import('../views/body/userCenter/Answer.vue')
            },
            {
              path: 'favorite',
              name: 'userFavorite',
              component: () => import('../views/body/userCenter/Favorite.vue')
            }
          ]
        },
        {
          path: 'message/:id',
          name: 'message',
          component: () => import('../views/body/message/Message.vue'),
          redirect: to => `/home/message/${to.params.id}/like`,
          children: [
            {
              path: 'like',
              name: 'messageLike',
              component: () => import('../views/body/message/Like.vue')
            },
            {
              path: 'reply',
              name: 'messageReply',
              component: () => import('../views/body/message/Reply.vue')
            },
            {
              path: 'chat',
              name: 'messageChat',
              component: () => import('../views/body/message/Chat.vue')
            },
            {
              path: 'system',
              name: 'messageSystem',
              component: () => import('../views/body/message/System.vue')
            },
          ]
        },
        {
          path: 'search/:keyword',
          name: 'search',
          component: () => import('../views/body/search/Search.vue'),
          redirect: to => `/home/search/${to.params.keyword}/article`,
          children: [
            {
              path: 'article',
              name: 'articleSearch',
              component: () => import('../views/body/search/ArticleSearch.vue')
            },
            {
              path: 'question',
              name: 'questionSearch',
              component: () => import('../views/body/search/QuestionSearch.vue')
            },
            {
              path: 'user',
              name: 'userSearch',
              component: () => import('../views/body/search/UserSearch.vue')
            },
            
          ]
        },
        {
          path: 'upload',
          name: 'upload', 
          redirect: '/home/upload/article',
          component: () => import('../views/body/upload/Upload.vue'),
          children: [
            {
              path: 'article', // Example child route
              name: 'uploadArticle',
              component: () => import('../views/body/upload/UplloadArticle.vue') // Example child component
            },
            {
              path: 'question', // Example child route
              name: 'uploadQuestion',
              component: () => import('../views/body/upload/UploadQuestion.vue') // Example child component
            }
          ]
        },
        
      ]
    },
  ],
})
router.beforeEach((to, from, next) => {
  console.log(`准备: 从 ${from.fullPath} 导航到 ${to.fullPath}`);
  
  // 判断是否登录
  
  if(cookie.get("user-token")) {
    console.log("token验证成功，已登录状态");
    // 用户已登录
    handleNavigation(to, from, next, true);
  } else {
    console.log("token验证失败，未登录状态");
   
    // 用户未登录
    handleNavigation(to, from, next, false);
  }
  
});

// 处理导航逻辑
function handleNavigation(to, from, next, isLogin) {
  // 对于需要登录验证的部分
  if (to.meta.requiresAuth) {
    if (isLogin) {
      console.log(`成功: 从 ${from.fullPath} 导航到 ${to.fullPath}`);
      next(); // 继续导航
    } else {
      console.log(`失败: 从 ${from.fullPath} 导航到 ${to.fullPath}`);
      ElMessage({
        message: '请先登录！',
        type: 'warning',
      });
      next('/login'); // 跳转到登录页
    }
  } else { // 不需要验证的部分
    if (isLogin && to.fullPath === '/') {
      console.log(`成功: 从 ${from.fullPath} 导航到 /home`);
      next('/home'); // 已登录用户跳转到主页
    } else {
      console.log(`成功: 从 ${from.fullPath} 导航到 ${to.fullPath}`);
      next(); // 继续导航
    }
  }
}
export default router
